<!--
* @author wn
* @date 2022/04/29 11:48:02
* @description: 人气推荐
!-->
<template>
	<div class="home-hot" ref="target">
		<home-panel title="人气推荐" sub-title="人气爆款，不容错过">
			<!-- 默认插槽 -->
			<transition name="fade">
				<ul class="goods-list" v-if="goods.length">
					<li v-for="good in goods" :key="good.id">
						<router-link :to="`/product/${good.id}`">
							<img v-lazy="good.picture" alt="" />
							<p class="name">{{ good.title }}</p>
							<p class="desc">{{ good.alt }}</p>
						</router-link>
					</li>
				</ul>
				<home-skeleton v-else />
			</transition>
		</home-panel>
	</div>
</template>
<script>
// import { ref } from 'vue'
import { findHot } from '@/network/home'
import HomePanel from './HomePanel'
import HomeSkeleton from './HomeSkeleton'
import { useLazyData } from '@/hooks'

export default {
	name: 'HomeHot',
	components: {
		HomePanel,
		HomeSkeleton,
	},
	setup() {
		/* 		const goods = ref([])
		// 获取新鲜好物数据
		findHot().then(v => (goods.value = v.result))
 */
		// 获取新鲜好物数据 byLazy  起别名
		const { target, result: goods } = useLazyData(findHot)
		return { target, goods }
	},
}
</script>
<style scoped lang="less">
.goods-list {
	display: flex;
	justify-content: space-between;
	height: 406px;
	li {
		width: 306px;
		// height: 406px;
		.hoverShadow();
		img {
			width: 306px;
			height: 306px;
		}
		p {
			font-size: 22px;
			padding-top: 12px;
			text-align: center;
		}
		.desc {
			color: #999;
			font-size: 18px;
		}
	}
}
</style>
